<template>
  <div id="app">
    <as-header title="ScrollerView" fixed>
      <router-link to="/" slot="left" class="link">
        <span class="iconfont icon-zuosanjiao"></span>
      </router-link>
    </as-header>
    <div class="goTop" @click="goTop"><i class="as-icon-up2"></i></div>
    <as-scroll-view
      ref="scroll"
      :data="listData"
      @onScroll="onScroll"
      @pullingUp="onScrollBottom"
      @pullingDown="onPullingDown"
    >
      <div class="list">
        <div class="item" v-for="(item, index) in listData" :key="index">
          <p>{{ item.title }}</p>
          <p>{{ item.desc }}</p>
          <div>
            <img :src="item.img" width="100%" height="300" alt="" />
          </div>
        </div>
      </div>
    </as-scroll-view>
  </div>
</template>

<script>
let json = [
  {
    title: '我是title1',
    desc: '这是一段测试文字',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
  },
  {
    title: '我是title2',
    desc: '这是一段测试文字',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
  },
  {
    title: '我是title3',
    desc: '这是一段测试文字',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg'
  },
  {
    title: '我是title4',
    desc: '这是一段测试文字',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg'
  }
]

export default {
  data() {
    return {
      listData: json,
      num: 1
    }
  },
  mounted() {},
  methods: {
    onScroll(e) {
      console.log(e.target.scrollTop)
    },
    onPullingDown() {
      setTimeout(() => {
        this.listData = this.listData.slice(0, 3)
        this.listData.unshift({
          title: `我是更新title${this.num++}`,
          desc: '这是一段测试文字',
          img:
            'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg'
        })
      }, 500)
    },
    onScrollBottom(e) {
      console.log(e)
      setTimeout(() => {
        this.listData = this.listData.concat(json)
      }, 200)
    },
    goTop() {
      this.$refs.scroll.scrollTo(0, 0)
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.scroll-wrapper {
  margin-top: 88px;
  height: calc(100vh - 88px) !important;
}
.goTop {
  position: fixed;
  top: 120px;
  right: 20px;
  z-index: 9999999;
  color: red;
}
</style>
